import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { PlayListMainWarp } from './style'
import HeaderRcm from './components/header-rcm'
import { useAppSelector } from '@/store'
import { shallowEqual } from 'react-redux'
import HeaderSong from './components/header-song'
import SongCard from './components/song-card'
import CommentForm from '@/components/comment-form'

interface IProps {
  children?: ReactNode
}

const PlayListMain: FC<IProps> = () => {
  const { playList, playListArr } = useAppSelector(
    (state) => ({
      playList: state.musicplayer.playList,
      playListArr: state.musicplayer.playListArr
    }),
    shallowEqual
  )
  const playCount = playListArr.playCount
  const item = playListArr && playListArr.tracks
  const length = playListArr && playListArr.trackCount
  const rightSlot = (
    <span>
      播放：<em style={{ color: '#c20c0c' }}>{playCount}</em>次
    </span>
  )

  // 评论
  const handleClick = () => {
    console.log(111)
  }
  return (
    <PlayListMainWarp>
      <HeaderRcm
        title="热门推荐"
        keywords={[`${length}首歌`]}
        showIcon={false}
        right={rightSlot}
      />
      <HeaderSong />
      {playList &&
        playList.map((item: any, index: number) => {
          return <SongCard key={index} index={index + 1} info={item}></SongCard>
        })}
      <div className="comment">
        <HeaderRcm title="评论" showIcon={false} right={false} />
        <div className="comment-control">
          <CommentForm handle={() => handleClick()} />
        </div>
        <div className="comment-list">
          <div className="hot">2</div>
          <div className="new">3</div>
        </div>
      </div>
    </PlayListMainWarp>
  )
}

export default memo(PlayListMain)
